<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	</head>
	<body style="overflow: hidden;">
		<div id="main" style="margin-top: 20px; width: 50%;height:500px;float: left"></div>
		<div id="main2" style="margin-top: 20px; width: 50%;height:500px;float: left"></div>
		<script type="text/javascript">
			$.ajax({
				url: "http://localhost:8181/bike/pie",
				type: "GET",
				dataType: "json", // 指定预期的服务器响应数据类型
				success: function(response) {
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main'));

					var option = {
						title: {
							text: '单车使用时长',
							x: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data: response
						},
						series: [
							{
								name: '单车使用时长(占比)',
								type: 'pie',
								radius: '55%',
								center: ['50%', '60%'],
								data: response,
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								},
								animationType: 'scale',
								animationEasing: 'elasticOut',
								animationDelay: function (idx) {
								  return Math.random() * 200;
								}
							}
						]
					}
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				},
				error: function(xhr, status, error) {
					// 请求失败时的回调函数
					// alert(error);
				}
			});

			$.ajax({
				url: "http://localhost:8181/bike/bar",
				type: "GET",
				dataType: "json", // 指定预期的服务器响应数据类型
				success: function(response) {
					var myChart = echarts.init(document.getElementById('main2'));

					var option = {
								title:{
									text:'区域单车数量',
									x:'center'
								},
								color: ['#3398DB'],
								tooltip : {
									trigger: 'axis',
									axisPointer : {            // 坐标轴指示器，坐标轴触发有效
										type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
									}
								},
								grid: {
									top:'20%',
									left: '3%',
									right: '4%',
									bottom: '1%',
									containLabel: true
								},
								xAxis : [
									{
										type : 'category',
										data : response.areaList,
										axisTick: {
											alignWithLabel: true
										}
									}
								],
								yAxis : [
									{
										type : 'value'
									}
								],
								series : [
									{
										name:'区域单车数量',
										type:'bar',
										barWidth: '30%',
										data:response.countList,
										animationType: 'scale',
										animationEasing: 'elasticOut',
										animationDelay: function (idx) {
											return Math.random() * 200;
										}
									}
								]
							};
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				},
				error: function(xhr, status, error) {
					// 请求失败时的回调函数
					// alert(error);
				}
			});
		</script>
	</body>
</html>
